<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" >
<head>

<title>Openlayers Extents Tool</title>

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ gmap_key }}" type="text/javascript"></script>

<style type="text/css">

html {
    height: 100%;
    font-family:"Lucida Grande","DejaVu Sans","Bitstream Vera Sans",sans-serif;
    font-size:10px;
    }

body {margin: 0px;}

#map {
	  width: 100%;
	  height: 100%;
  	}


div.olControlMousePosition {
    right:250px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olControlPermalink {
    right: 0px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olControlScale {
    right: 100px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;  
    }

.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;   
    }

.olControlAttribution {
    font-size: small; 
    right: 3px; 
    color:steelblue;
    bottom: 2em; 
    position: absolute; 
    display: block;
    }

.olHandlerBoxZoomBox {
    border-left-style: none;
    border-bottom-style: ridge;
    border-right-style: none;
    border-top-style: groove;
    border-width: 2px;
    border-color: blue;
    position: absolute;
    background-color: steelblue;
    opacity: 0.50;
    font-size: 1px;
    filter: alpha(opacity=50);
    }

.title {
    word-spacing: 6px;
    color: #2f4272;
    font-weight: bold;
    text-shadow: 2px 2px 6px #f3fcff;
    position:absolute;
    top: 25px;
    z-index:10000;
    left: 100px;
    font-size: 30px;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    }
</style>
   
 <script type="text/javascript">
    var feat, attr, select_options, select, map_options, map;
    function init(location, zoom){

    map_options = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        theme : null,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
        numZoomLevels: 22
        }

    map = new OpenLayers.Map('map', map_options);

    var google_terrain = new OpenLayers.Layer.Google(
        "Google Terrain", {type: G_PHYSICAL_MAP, 'sphericalMercator': true});
    
    var google_hybrid = new OpenLayers.Layer.Google(
        "Google Satellite", {type: G_HYBRID_MAP, 'sphericalMercator': true});
    
    var osm = new OpenLayers.Layer.OSM("Mapnik from OSM");
    map.addLayers([google_terrain, google_hybrid, osm]);

            
    // Add controls, including pre-maximized layerswitcher
    var layerswitcher = new OpenLayers.Control.LayerSwitcher('layerswitcher');
    map.addControl(layerswitcher);
    layerswitcher.maximizeControl();
    map.addControl(new OpenLayers.Control.MousePosition('mousepostion'));
    map.addControl(new OpenLayers.Control.Permalink('permalink'));
    map.addControl(new OpenLayers.Control.Scale());


   function write_out(srs,bounds){

       var bbox = bounds.toBBOX();
       var envelope = ('Envelope(' + bbox + ')');
       
       // -projwin's ulx uly lrx lry is equivalent to xMin, yMax, xMax, yMin
       // standard bbox's are is xMin, yMin, xMax, yMax
       // therefore for projwin we switch the y coordinates
       var projwin = ('-projwin ' + bounds.left + " " + bounds.top + " " + bounds.right + " " + bounds.bottom);
        
       $('mapnik_' + srs).value = envelope;
       $('gdal_' + srs).value = projwin;

   }

   function write_bounds() {
   
        var bounds = map.getExtent();
        write_out('merc',bounds);
        var wgs84_bounds = bounds.toGeometry().transform(map.getProjectionObject(), map.displayProjection).getBounds();
        write_out('wgs',wgs84_bounds); 
        
   }



   function write_extents(bounds) {
        var display = new OpenLayers.Projection("EPSG:4326");
        //var wgs_extent = merc_extent.transform(map.getProjectionObject(), displayProjection) //transform.(from,to)

        var ll_merc = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));
        var ll = ll_merc.transform(map.getProjectionObject(), display);
        var ur_merc = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));
        var ur = ur_merc.transform(map.getProjectionObject(), display);
        
        var mapnik_envelop = ('Envelope(' + ll.lon.toFixed(4) + ", " + ll.lat.toFixed(4) + ", " + ur.lon.toFixed(4) + ", " + ur.lat.toFixed(4) + ')');
        var gdal_projwin = ('-projwin ' + ll.lon.toFixed(4) + " " + ll.lat.toFixed(4) + " " + ur.lon.toFixed(4) + " " + ur.lat.toFixed(4));
        $('mapnik_wgs').value = mapnik_envelop;
        $('gdal_wgs').value = gdal_projwin;

        var display = new OpenLayers.Projection("EPSG:900913");
        //var wgs_extent = merc_extent.transform(map.getProjectionObject(), displayProjection) //transform.(from,to)
         
         
        var ll_merc = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));
        var ll = ll_merc.transform(map.getProjectionObject(), display);
        var ur_merc = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));
        var ur = ur_merc.transform(map.getProjectionObject(), display);
        
        var mapnik_envelop = ('Envelope(' + ll.lon.toFixed(4) + ", " + ll.lat.toFixed(4) + ", " + ur.lon.toFixed(4) + ", " + ur.lat.toFixed(4) + ')');
        var gdal_projwin = ('-projwin ' + ll.lon.toFixed(4) + " " + ll.lat.toFixed(4) + " " + ur.lon.toFixed(4) + " " + ur.lat.toFixed(4));
         
        $('mapnik_merc').value = mapnik_envelop;
        $('gdal_merc').value = gdal_projwin;
   
   }

    function setBoundsFromMap(e) {
        write_bounds();
    }
    
    var control = new OpenLayers.Control();
        OpenLayers.Util.extend(control, {
            draw: function () {
                // this Handler.Box will intercept the shift-drag zoomBox
                this.box = new OpenLayers.Handler.Box( control,
                    {"done": this.notice},
                    {keyMask: OpenLayers.Handler.MOD_ALT});
                this.box.activate();
            },
          
        notice: function (bounds) {
            write_extents(bounds);
              
        }
       
       });
 
 /*
 Proj4js.defs["EPSG:3035"] = "+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs ";
Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";

var coord = map.getLonLatFromPixel(new OpenLayers.Pixel(event.xy.x,event.xy.y));
// utilizzo la libreria proj4js di boygenius per riottenere lat e lon dalla mappa con un epsg diverso da 4326
var sourceProj = new Proj4js.Proj(map.getProjection());
var destProj = new Proj4js.Proj("EPSG:4326");
var p = new OpenLayers.Geometry.Point(coord.lon, coord.lat);
OpenLayers.Console.log(p);
Proj4js.transform(sourceProj, destProj,p);
OpenLayers.Console.log(p);
*/
    
    
    map.addControl(control);
    // Enable the permalink method
    // If permalink URL does not exist them will zoom to default bounds (hackish approach)  
    if (!map.getCenter()) {
        if (location) { 
        map.setCenter(location, zoom); 
        } else {
            map.zoomToMaxExtent();
            map.zoomIn(3);
        }}
        
    // Register *after* we set the map for the first time
    map.events.register("moveend", map, setBoundsFromMap);
    map.events.register("zoomend", map, setBoundsFromMap);         
    }
    </script>
  </head>
  <body onload="init()">
      <h1 style="position:absolute; z-index:10000; top:20px; left: 100px;">Get the Extents!</h1>
    <div id="map">
    </div>
    <div id="bounds1" style="font-size: small; left:10px; position:absolute; bottom: 40px; z-index:10000">
    <input type="textarea" size= "65" id='mapnik_merc' name="mapnik" value="Mapnik Envelope() Google Mercator" />
    </div>
    <div id="bounds2" style="font-size: small; left:10px; position:absolute; bottom: 70px; z-index:10000">
    <input type="textarea" size= "65" id='gdal_merc' name="gdal" value="GDAL Projection Window Google Mercator" />
    </div>
    <div id="bounds3" style="font-size: small; right:10px; position:absolute; bottom: 40px; z-index:10000">
    <input type="textarea" size= "65" id='mapnik_wgs' name="mapnik" value="Mapnik Envelope() WGS84" />
    </div>
    <div id="bounds4" style="font-size: small; right:10px; position:absolute; bottom: 70px; z-index:10000">
    <input type="textarea" size= "65" id='gdal_wgs' name="gdal" value="GDAL Projection Window WGS84" />
    </div>

    
  </body>
</html>
